<template>
  <h1 className="text-3xl font-bold underline">Hello world!</h1>
  <p class="text-blue-600 text-2xl text-center">
    This is a Vue 3 + Vite + Typescript + Tailwind project.
  </p>
  <LangSwitcher class="w-16 mx-auto"></LangSwitcher>
  <div class="card flex flex-col gap-6 items-center justify-center">
    <Toast />
    <FileUpload
      ref="fileupload"
      mode="basic"
      name="demo[]"
      url="/api/upload"
      accept="image/*"
      :maxFileSize="1000000"
      @upload="onUpload"
    />
    <Button
      :label="i18nText.upload.value"
      @click="upload"
      severity="secondary"
    />
  </div>
  <div>
    <DataTable :value="products" tableStyle="min-width: 50rem">
      <template #header>
        <div style="text-align: left">
          <MultiSelect
            :modelValue="selectedColumns"
            :options="columns"
            optionLabel="header"
            @update:modelValue="onToggle"
            display="chip"
            :placeholder="i18nText.selectColumns.value"
          />
        </div>
      </template>
      <Column field="id" header="ID" />
      <Column
        v-for="(col, index) of selectedColumns"
        :field="col.field"
        :header="col.header"
        :key="col.field + '_' + index"
      ></Column>
    </DataTable>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import useI18nText from "@/hooks/i18nText";
import testData from "@/data/test";
const i18nText = useI18nText();
onMounted(() => {});

const columns = ref([
  { field: "name", header: "姓名" },
  { field: "company", header: "公司" },
]);
const selectedColumns = ref(columns.value);
const products = ref(testData.data);
const onToggle = (val: string[]) => {
  selectedColumns.value = columns.value.filter((col: any) => val.includes(col));
};
const fileupload = ref();

const upload = () => {
  fileupload.value.upload();
};

const onUpload = () => {
  console.log("onUpload");
};
</script>
